<!DOCTYPE html>
<html>

<head>
  <title>滑动图片验证码</title>
  <style>
    .captcha-container {
      position: relative;
      width: 300px;
      height: 150px;
      overflow: hidden;
    }

    .captcha-image {
      width: 100%;
      height: 100%;
    }

    .captcha-slider {
      position: absolute;
      top: 50%;
      left: 0;
      width: 50px;
      height: 50px;
      margin-top: -25px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 25px;
      cursor: pointer;
    }

    .captcha-slider img {
      width: 30px;
      height: 30px;
      margin: 10px;
    }

    .captcha-slider:before {
      content: "请拖动滑块验证";
      position: absolute;
      top: 50%;
      left: 60px;
      transform: translateY(-50%);
      font-size: 14px;
      color: #666;
    }
  </style>
</head>

<body>
  <div class="captcha-container">
    <img src="original-image.jpg" class="captcha-image">
    <div class="captcha-slider">
      <img src="slider-image.png">
    </div>
  </div>

  <script>
    var slider = document.querySelector('.captcha-slider');
    var container = document.querySelector('.captcha-container');
    var startX, endX;

    slider.addEventListener('mousedown', function (e) {
      startX = e.clientX - slider.offsetLeft;
    });

    container.addEventListener('mousemove', function (e) {
      if (startX) {
        slider.style.left = e.clientX - startX + 'px';
      }
    });

    container.addEventListener('mouseup', function (e) {
      endX = e.clientX - startX;
      startX = null;
      if (endX > 200) {  // 此处判断通过的条件
        alert('验证通过！');
      } else {
        slider.style.left = 0;
      }
    });
  </script>
</body>

</html>